<template>
  <div class="SharePoster">
    <assets-head :title="$t('分享二维码')" />
    <div id="example px-16" v-if="list.length" :style="{visibility: readyCount === 3 ? 'visiable' : 'hidden'}">
      <carousel-3d :width="285" :height="505" :space="340" :onSlideChange="onSlideChange">
        <slide v-for="(slide, index) in list" :index="index" :key="index">
          <vue-canvas-poster :widthPixels="1000" :painting="slide.painting" @success="success(index, $event)"
            @fail="fail"></vue-canvas-poster>
          <img :src="slide.posterImg" style="width: auto; height: 507px;" v-if="slide.posterImg">
        </slide>
      </carousel-3d>
    </div>
    <!-- <div class="carousel-3d-width" v-if="false">
      <div class="carousel-3d-width-flex"></div>
      <div class="content_container">
        <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
        <img :src="posterImg">
      </div>
      <div class="carousel-3d-width-flex"></div>
    </div> -->
    <div class="button" @click="download" v-if="readyCount === 3">{{$t('保存海报')}}</div>


  </div>
</template>
<script>
import assetsHead from "@/components/assets-head";
// import Axiospromote from "@/API/promote";
import { Carousel3d, Slide } from 'vue-carousel-3d';
import { VueCanvasPoster } from 'vue-canvas-poster';
import { mapGetters } from "vuex";
import {Toast} from "vant";

export default {
  data() {
    return {
      posterImg: '',//生成的海报
      painting: {},
      localuser:{},
      background_url1:require('../../assets/image/promote/sw_en_1.png'),
      background_url2:require('../../assets/image/promote/sw_en_2.png'),
      background_url3:require('../../assets/image/promote/sw_en_3.png'),
      list: [],
      active: 1,
      readyCount: 0 // 是否已经加载完全
    }
  },
  components: {
    assetsHead,
    Carousel3d,
    Slide,
    VueCanvasPoster
  },
  computed: {
    ...mapGetters('user', ['userInfo'])
  },
  mounted() {
    // console.log(this.$i18n.locale, this.userInfo)
    if (this.$i18n.locale == 'CN'){
      this.background_url1 = require('../../assets/image/promote/sw_cn_1.png')
      this.background_url2 = require('../../assets/image/promote/sw_cn_2.png')
      this.background_url3 = require('../../assets/image/promote/sw_cn_3.png')
    }
    setTimeout(() => {
      this.localuser_get()
    }, 500)
  },
  methods: {
    localuser_get(){
     // this.$toast.loading({ duration: 0})
      const url = this.userInfo.url
      // Axiospromote.localuser({}).then((res)=>{
        for (let i = 0; i < 3; i++) {
          const background = this['background_url' + (i + 1)]
          var painting = {
            width: '570px',
            height: '1014px',
            background,
            views: [{
              type: 'qrcode',
              content: url,
              css: {
                bottom: i === 2 ? '380px': '90px',
                right: '215px',
                color: '#000',
                background: '#fff',
                width: '150px',
                height: '150px',
                borderWidth: '10px',
                borderColor: '#fff'
              },
            }],
          }
          this.list.push({
            painting,
            posterImg: '',
            ready: false
          })
        }
      // })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    success(index, src) {
      this.list[index].posterImg = src
      this.readyCount++
      if (this.readyCount === 3) {
        this.$toast.clear()
        // console.log('ready')
      }
    },
    fail(err) {
      // alert(err)
    },
    getUrlBase64(url) {
      return new Promise(resolve => {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let img = new Image()
        img.crossOrigin = 'Anonymous' //允许跨域
        img.src = url
        img.onload = function() {
          canvas.height = 420
          canvas.width = 258
          ctx.drawImage(img, 0, 0, 258, 420)
          let dataURL = canvas.toDataURL('image/png')
          canvas = null
          resolve(dataURL)
        }
      })
    },
    onSlideChange(evt) {
      this.active = evt
    },
    download() {
      this.getUrlBase64(this.list[this.active].posterImg).then(base64 => {
        let link = document.createElement('a')
        link.href = base64
        link.download = 'qrCode.png'
        link.click()
        Toast.loading({
          duration: 1000,
          forbidClick: true
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>

* { touch-action: none; }
.SharePoster{
  width: 100%;
  box-sizing: border-box;
}
.carousel-3d-container {
  .carousel-3d-slide {
    padding: 20px;
    background: #fff;
    border: 1px solid #fff;

    .title { font-size: 22px; }
  }
}

// .carousel-3d-width{
//   margin-top: 75px;
//   width: 100%;
//   display: flex;
// }
// .carousel-3d-width-flex{
//   flex: 1;
// }
// img {
//   width: 600px;
//   height: 100%;
// }
.button{
  margin-top: 60px;
  width: 300px;
  height: 85px;
  background: #FCD436;
  border-radius: 4px;
  line-height: 85px ;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
</style>
